<template>
  <chart :options="options" />
</template>
<script>
export default {
  name: 'ChartBar',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    legend: {
      type: Array,
      default: () => {
        return []
      }
    },
    colors: {
      type: Array,
      default: () => {
        return null
      }
    },
    text: {
      type: String,
      default: () => {
        return ''
      }
    },
    textColor: {
      type: String,
      default: () => {
        return '#fff'
      }
    },
    textFont: {
      type: Number,
      default: () => {
        return 20
      }
    },
    roseType: {
      type: String,
      default: () => {
        return ''
      }
    },
    radius: {
      type: Array,
      default: () => {
        return ['50%', '70%']
      }
    },
    labelLine: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    label: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    position: {
      type: String,
      default: () => {
        return ''
      }
    },
    left: {
      type: String,
      default: () => {
        return 'left'
      }
    },
    subtext: {
      type: String,
      default: () => {
        return ''
      }
    },
    length2: {
      type: Number,
      default: () => {
        return null
      }
    },
    length: {
      type: Number,
      default: () => {
        return null
      }
    },
    center: {
      type: Array,
      default: () => {
        return ['50%', '50%']
      }
    }
  },
  data () {
    return {}
  },
  computed: {
    options () {
      return {
        title: {
          text: this.text,
          subtext: this.subtext,
          x: 'center',
          y: 'center',
          textStyle: {
            color: this.textColor,
            fontSize: 66
          },
          subtextStyle: {
            color: '#00DAFF',
            fontSize: 48,

            fontFamily: 'LESLIE-Regular'
          }
        },
        tooltip: {
          trigger: 'item',
          borderColor: 'rgba(255,255,255,.3)',
          backgroundColor: 'rgba(13,5,30,.6)',
          borderWidth: 1,
          padding: 5,
          formatter: function (parms) {
            var str =
              parms.marker +
              '' +
              parms.data.name +
              '</br>' +
              '数量：' +
              parms.data.value +
              '</br>' +
              '占比：' +
              parms.percent +
              '%'
            return str
          }
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          left: this.left,
          align: 'auto',
          top: 'middle',
          textStyle: {
            color: '#B2CBFF'
          },
          data: this.legend
        },
        color: this.colors,
        grid: {
          left: '50%',
          right: '1000%',
          bottom: '1%',
          top: '5%',
          containLabel: true
        },
        series: [
          {
            type: 'pie',
            z: 3,
            center: this.center,
            radius: this.radius,
            clockwise: true,
            avoidLabelOverlap: true,
            roseType: this.roseType,
            hoverOffset: 15,
            // itemStyle: {
            //     normal: {
            //         color: function(params) {
            //             return this.colorList[params.dataIndex]
            //         }
            //     }
            // },
            label: {
              show: this.label,
              position: this.position,
              alignTo: 'edge',
              formatter: '{c|{d}%}  \n\n  {b|{b}}',
              // formatter: '{a|{b}：{d}%}\n{hr|}',

              padding: [0, -10],
              textStyle: {
                fontWeight: 300,
                fontSize: 20
              },
              rich: {
                a: {
                  padding: [-10, 15, -20, 15]
                }
              }
            },
            labelLine: {
              normal: {
                show: this.labelLine,
                lineStyle: {
                  color: 'rgba(171, 191, 213, 1)',
                  width: 1
                },
                length: this.length,
                length2: this.length2
              }
            },
            data: this.data
          }
        ]
      }
    }
  }
}
</script>
